<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1>兼容 ie </h1>
    <h1>兼容 safari </h1>


    <style>
        body {
            padding: 66px;
            margin-top: 55px;
        }

        .switch {
            display: inline-block;
            position: relative;
        }

        /* -999999 用来隐藏   */
        .switch input[type="checkbox"] {
            position: absolute;
            left: -9999px;
        }

        .switch label {
            cursor: pointer;
        }


        /* 
            .h2 + p{ color: red; }
            CSS兄弟相邻选择器加号“+”，可以选择指定元素相邻的下一个元素，
            可以选择h2元素后面紧跟的相邻的第一个P元素标签
        */


        /*      中间那个小圆球    */
        .switch label span::before {
            content: "before";
            position: absolute;
            top: 10px;
            left: 10px;
            width: 140px;
            height: 140px;
            background: lightblue;
            border-radius: 50%;
            transition: transform 0.3s;
        }

        /* 当被选中的时候, 那个白色的小圆球, 向右移动 140 px */
        .switch input[type="checkbox"]:checked+label span::before {
            transform: translateX(140px);
        }



        /*     OFF/ON  的颜色  , 距离右边只有 10px  */
        .switch label span::after {
            content: "OFF";
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);     /*    上下居中    */
            font-size: 4rem;
            color: white;
        }

        /* 当被选中的时候, 设置为 ON , 并且距离左边只有 10 px */
        .switch input[type="checkbox"]:checked+label span::after {
            content: "ON";
            left: 10px;
            /* right: 170px;    这里使用 左或者右 都是可以的 */
        }





        /*     深灰色的背景色   */
        .switch span {
            display: inline-block;
            position: relative;
            width: 300px;
            height: 160px;
            background: #434257;
            border-radius: 999px;
            transition: all 0.8s;
        }

        /* 当被选中的时候, 背景色设置为绿色  */
        .switch input[type="checkbox"]:checked+label span {
            background: #00d084;
        }
    </style>




    <div class="switch">
        <input type="checkbox" id="aaaaaaaa" />
        <label for="aaaaaaaa">
            <span></span>
        </label>
    </div>



    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">

        必知必会

        <div class="switch">
            <input type="checkbox" id="aaaaaaaa" />
            <label for="aaaaaaaa">
                <span></span>
            </label>
        </div>


        .switch {
        display: inline-block;
        position: relative;
        }

        /* -999999 用来隐藏 */
        .switch input[type="checkbox"] {
        position: absolute;
        left: -9999px;
        }

        .switch label {
        cursor: pointer;
        }

        .switch span {
        display: inline-block;
        position: relative;
        width: 300px;
        height: 160px;
        background: #434257;
        border-radius: 999px;
        transition: all 0.8s;
        }

        .switch label span::before {
        content: "before";
        position: absolute;
        top: 10px;
        left: 10px;
        width: 140px;
        height: 140px;
        background: white;
        border-radius: 50%;
        transition: transform 0.3s;
        }

        .switch label span::after {
        content: "OFF";
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 4rem;
        color: white;
        }

        .h2 + p{ color: red; }
        CSS兄弟相邻选择器加号“+”，可以选择指定元素相邻的下一个元素，
        可以选择h2元素后面紧跟的相邻的第一个P元素标签

        /* 那个白色的小圆球, 向右移动 140 px */
        .switch input[type="checkbox"]:checked+label span::before {
        transform: translateX(140px);
        }

        .switch input[type="checkbox"]:checked+label span::after {
        content: "ON";
        left: 10px;
        right: auto;
        /* right: 170px; 这里使用 左或者右 都是可以的 */
        }

        .switch input[type="checkbox"]:checked+label span {
        background: #00d084;
        }


    </xmp>
</body>

</html>